<template>
<div>
  <h1>首页</h1>
  <div>
    <h3>ip-input输入框：</h3>
    <div>
      <el-row>
        <el-col :span="18">
          <el-form ref="dataForm" :model="dataForm" :rules="dataRules">
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="1111" v-model="dataForm.name"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="nick">
              <el-input v-model="dataForm.nick"></el-input>
            </el-form-item>
            <el-form-item label="ip地址" prop="ipAddress">
              <ip-input
                  v-model="dataForm.ipAddress"
                  :disabled="false"
                  placeholder="ipv4"
              >
              </ip-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>

<script>
import IpInput from '@/components/ip-input'
export default {
  name: "index",
  components: { IpInput },
  data () {
    let validateIp = (rule, value, callback) => {
      const IP_RULES = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      if (!value) {
        callback(new Error("ip地址不能为空"))
      }
      if (!IP_RULES.test(value)) {
        callback(new Error("ip格式不正确"))
      } else {
        callback()
      }
    }
    return {
      dataForm: {
        name: '',
        nick: '',
        ipAddress: ''
      },
      dataRules: {
        name: [
          { required: true, message: '姓名不能为空'}
        ],
        nick: [
          { required: true, message: '名称不能为空'}
        ],
        ipAddress: [
          { required: true, message: 'ip地址不能为空'},
          {validator: validateIp, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      console.log("this.dataForm", this.dataForm)
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          console.log("this.dataForm 验证通过", this.dataForm)

        }
      })
    }
  }
}
</script>

<style scoped>

</style>
